<template>
  <div>
<!--    <div>-->
<!--  <el-table-->
<!--      :data="tableData"-->
<!--      style="width: 100%"-->
<!--      :row-class-name="tableRowClassName">-->
<!--    <el-table-column-->
<!--        prop="date"-->
<!--        label="日期"-->
<!--        width="180">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="name"-->
<!--        label="姓名"-->
<!--        width="180">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="address"-->
<!--        label="地址">-->
<!--    </el-table-column>-->
<!--  </el-table>-->
<!--  </div>-->
<!--    <div class="block">-->
<!--      <span class="demonstration">大于 7 页时的效果</span>-->
<!--      <el-pagination-->
<!--          layout="jumper,prev, pager, next"-->
<!--          :total="1000">-->
<!--      </el-pagination>-->
<!--    </div>-->
<!--    <div>-->
<!--      &lt;!&ndash; Form &ndash;&gt;-->
<!--      <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

<!--      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">-->
<!--        <el-form :model="form">-->
<!--          <el-form-item label="活动名称" :label-width="formLabelWidth">-->
<!--            <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="活动区域" :label-width="formLabelWidth">-->
<!--            <el-select v-model="form.region" placeholder="请选择活动区域">-->
<!--              <el-option label="区域一" value="shanghai"></el-option>-->
<!--              <el-option label="区域二" value="beijing"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button>取 消</el-button>-->
<!--          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
<!--    </div>-->
    <div>
      <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <!-- Form -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    </div>
</template>

<style>
</style>

<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },
      // dialogTableVisible: false,
      dialogFormVisible: false,
      // form: {
      //   name: '',
      //   region: '',
      //   date1: '',
      //   date2: '',
      //   delivery: false,
      //   type: [],
      //   resource: '',
      //   desc: ''
      // },
      // formLabelWidth: '120px'
    };
  },
  methods: {
    submitForm() {
      // alert(this.ruleForm.pass)
      alert(JSON.stringify(this.ruleForm))
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>